<!--
 * @Author: 赵宇
 * @Description: 
 * @Date: 2023-03-13 13:27:40
 * @LastEditTime: 2023-03-14 18:03:26
 * @LastEditors: zhao 13370229059@163.com
 * @FilePath: \pcj\src\page\form\components\formEdit.vue
-->
<template>
  <div class="form">
    <ul class="form-box">
      <li class="flex-1">
        <div>基本信息</div>
        <draggable :list="dra.foundationInfo" :group="{ name: 'people', put: false }" :sort="false">
          <template #item="{ element }">
            <el-tag class="mr-10 mt-5 mb-5" size="large" :type="element.isRequired ? 'danger' : 'success'">{{ element.label }}</el-tag>
          </template>
        </draggable>
      </li>
      <li class="flex-4">
        <el-row class="h-100" :gutter="20">
          <el-form :model="form" label-width="100px" class="w-100 h-100">
            <el-divider v-if="!dra.selects.length">请从左侧拖入需要使用的规格</el-divider>
            <draggable :list="dra.selects" group="people" class="form-box-selects">
              <template #item="{ element }">
                <el-col
                  class="item"
                  :span="element.subsidiary ? element.subsidiary.col : 24"
                  @click="throttle(onItemClick, element)"
                  :class="{ 'active-item': element.subsidiary.isActive }"
                >
                  <div class="item-form">
                    <el-form-item :label="element.label">
                      <!-- 单行文本 -->
                      <template v-if="element.specType === 1">
                        <el-input v-model="forms[element.id]" clearable :placeholder="`请输入${element.label}`"></el-input>
                      </template>
                      <!-- 多行文本 -->
                      <template v-else-if="element.specType === 2">
                        <el-input v-model="forms[element.id]" clearable type="textarea" :placeholder="`请输入${element.label}`"></el-input>
                      </template>
                      <!-- 单选 -->
                      <template v-else-if="element.specType === 3">
                        <el-select v-model="forms[element.id]" :placeholder="`请选择${element.label}`" clearable filterable>
                          <el-option v-for="row in element.selectOptions" :key="row.value" :label="row.label" :value="row.value"> </el-option>
                        </el-select>
                      </template>
                      <!-- 多选 -->
                      <template v-else-if="element.specType === 4">
                        <el-select v-model="forms[element.id]" multiple :placeholder="`请选择${element.label}`" clearable filterable>
                          <el-option v-for="row in element.selectOptions" :key="row.value" :label="row.label" :value="row.value"> </el-option>
                        </el-select>
                      </template>
                      <!-- 数值 -->
                      <template v-else-if="element.specType === 5">
                        <z-input v-model="forms[element.id]" :placeholder="`请输入${element.label}`" :max="element.pointLength" />
                      </template>
                      <!-- 日期选择 -->
                      <template v-else-if="element.specType === 6">
                        <el-date-picker v-model="forms[element.id]" :placeholder="`请选择${element.label}`" value-format="YYYY-MM-DD" class="date-picker">
                        </el-date-picker>
                      </template>
                    </el-form-item>
                    <div class="item-form-del">
                      <el-button type="danger" size="small" circle @click="onDel(element)"> <IEpDelete /> </el-button>
                    </div>
                  </div>
                </el-col>
              </template>
            </draggable>
          </el-form>
        </el-row>
      </li>
      <li class="flex-1">
        <ul v-if="dra.active.subsidiary">
          <li class="dis-flex flex-center">
            <span class="mr-5">表格栅格</span>
            <div class="flex-1">
              <el-slider v-model="dra.active.subsidiary.col" :marks="{ 6: 6, 12: 12, 18: 18, 24: 24 }" :min="6" :max="24" />
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>
<script setup>
import draggable from 'vuedraggable';
import { post } from '@/api/index.js';
let route = useRoute();
let router = useRouter();
let { purview, throttle } = inject('$global');
let $message = inject('$message');
let dra = reactive({
  foundationInfo: [],
  selects: [],
  active: {}
});
let forms = reactive({});
const onItemClick = val => {
  dra.selects.map(r => {
    r.subsidiary.isActive = false;
  });
  dra.active = val.subsidiary.isActive ? {} : val;
  val.subsidiary.isActive = !val.subsidiary.isActive;
};
// 请求规格接口
const getSpecList = async () => {
  let { result } = await post('CustomCategorySpec/GetList', { pageSize: 999, pageIndex: 1, isNotContain: true });
  dra.foundationInfo = result.items.map(r => {
    let obj = { ...r };
    obj.subsidiary = {
      isActive: false,
      col: 12
    };
    return obj;
  });
};

getSpecList();

const onDel = val => {
  let index = dra.selects.findIndex(r => val.id === r.id);
  dra.foundationInfo.push(...dra.selects.splice(index, 1));
};
</script>
<style lang="scss" scoped>
.form {
  height: 100%;
  width: 100%;
  background-color: #fff;
  &-box {
    height: 100%;
    width: 100%;
    display: flex;
    border-top: 1px solid $border-color;
    border-left: 1px solid $border-color;
    li {
      padding: 10px;
      border-right: 1px solid $border-color;
      border-bottom: 1px solid $border-color;
    }
    &-selects {
      display: flex;
      flex-wrap: wrap;
      max-height: 100%;
      overflow-y: auto;
      .item {
        cursor: move;
        transition: all 1s;
        border-radius: 6px;
        &-form {
          display: grid;
          position: relative;
          padding: 10px {
            bottom: 0;
          }
          &-del {
            position: absolute;
            right: 5px;
            top: 5px;
            opacity: 0;
            transition: all 1s;
          }
        }
        &:hover {
          .item-form {
            background: #f6f7ff;
            &-del {
              opacity: 1;
            }
          }
        }
      }
      .active-item {
        .item-form {
          background: #ecf5ff;
        }
      }
    }
  }
}
</style>
